<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商城管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑规格</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="规格信息" name="info">
						<div class="tab-content">
							<el-form-item prop="merchantId" label="所属商户">
								<dt-merchant-select v-model="model.merchantId"></dt-merchant-select>
							</el-form-item>
							<el-form-item prop="remark" label="类别名称">
								<el-input v-model="model.remark" placeholder="如:服装类，最多250字符" clearable></el-input>
							</el-form-item>
							<el-form-item prop="title" label="规格名称">
								<el-input v-model="model.title" placeholder="如:颜色，128字符内"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input type="number" v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item label="规格列表">
								<el-button type="primary" size="small" icon="el-icon-plus"@click="addRow">添加</el-button>
								<el-button type="danger" size="small" icon="el-icon-delete"@click="removeRow">删除</el-button>
							</el-form-item>
							<el-form-item>
								<el-card class="table-card">
									<el-table ref="skusTable" :data="model.children" class="table-form" @selection-change="handleSelectionChange">
										<el-table-column type="selection" width="45"></el-table-column>
										<el-table-column width="110" prop="imgUrl" label="规格图片">
											<template slot-scope="scope">
												<el-form-item :prop="'children.' + scope.$index + '.imgUrl'" style="margin:auto">
													<dt-upload v-model="scope.row.imgUrl" :boxwh="40"></dt-upload>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column min-width="120" prop="title" label="规格文字">
											<template slot-scope="scope">
												<el-form-item :prop="'children.' + scope.$index + '.title'" :rules='rules.children.title' style="margin:auto">
													<el-input size="small" v-model="scope.row.title" placeholder="必填，规格文字"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column width="90" prop="sortId" label="排序">
											<template slot-scope="scope">
												<el-form-item :prop="'children.' + scope.$index + '.sortId'" :rules='rules.children.sortId' style="margin:auto">
													<el-input size="small" v-model="scope.row.sortId" placeholder="排序数字"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column fixed="right" width="60" label="操作" align="center">
											<template slot-scope="scope">
												<el-link :underline="false" icon="el-icon-delete" @click="removeRow(scope.$index)"></el-link>
											</template>
										</el-table-column>
									</el-table>
								</el-card>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	import DtMerchantSelect from '../../../components/DtMerchantSelect.vue'
	
	export default {
		components: {
			DtUpload,
			DtMerchantSelect
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				multipleSelection: [],
				model: {
					id: 0,
					merchantId: null,
					title: null,
					imgUrl: null,
					remark: null,
					sortId: 99,
					addBy: null,
					addTime: null,
					children: []
				},
				rules: {
					merchantId: [
						{ required: true, message: '请选择所属商户', trigger: 'blur' }
					],
					title: [
						{ required: true, message: '请输入规格名称', trigger: 'blur' }
					],
					remark: [
						{ required: true, message: '请输入类别名称', trigger: 'blur' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' }
					],
					children: {
						title: [
							{ required: true, message: '请输入规格值名称', trigger: 'blur' }
						],
						sortId: [
							{ required: true, message: '请输入排序数字', trigger: 'blur' }
						]
					}
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/admin/shop/sku/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查规格值
					if (_this.model.children.length === 0) {
						_this.$message({ type: 'warning', message: '错误提示：请添加规格值后提交' });
						return false;
					}
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/shop/sku/' + _this.model.id,
							data: _this.model,
							successMsg: '修改规格已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//可跳转加列表页
								_this.$common.linkUrl('/shop/sku/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/admin/shop/sku',
							data: _this.model,
							successMsg: '新增规格已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
								_this.model.children = [];
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
			//删除行
			removeRow() {
				let _this = this; //当前页面
				let list = _this.multipleSelection; //拿到选中的数据
				if (list.length) {
					list.forEach((item, index) => {
						//遍历源数据
						_this.model.children.forEach((v, i) => {
							//如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
							if (item == v) {
								_this.model.children.splice(i, 1);
							}
						})
					});
				}
				//清除选中状态
				_this.$refs.dialogTable.clearSelection();
			},
			//新增编辑行
			addRow() {
				this.model.children.push({
					id: 0,
					parentId: 0,
					title: '',
					imgUrl: null,
					remark: null,
					sortId: 99
				});
			},
			//列表选中事件
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
		created() {
			this.initData();
		}
	}
</script>